<template>
	<view class="other-information">
		<view class="information-item">
			<view class="title">
				<view class="text">扩展资料</view>
				<view class="iconfont iconbaocun-info" @click="submitMsg"></view>
			</view>
			<view class="information-input-item">
				<view class="item-title">姓名</view>
				<input style="margin-right: 68upx;" v-model="reqData.nicheng" placeholder="请输入姓名" type="text"></input>
			</view>
			<view class="information-input-item">
				<view class="item-title">性别</view>
				<picker :value="reqData.sex-1" @change="handelSex" :range="sexList" range-key="value">
					<view class="sel-content">
						<input disabled="true" placeholder="请选择你的性别" :value="reqData.sex == 1 ? '男' : '女'"></input>
						<view class="iconfont iconjiantou"></view>
					</view>
				</picker>
			</view>
			<view class="information-input-item">
				<view class="item-title">生日</view>
				<picker mode="date" @change="handelBirthday" :value="reqData.birthday">
					<view class="sel-content">
						<input disabled="true" placeholder="请选择你的生日" v-model="reqData.birthday"></input>
						<view class="iconfont iconjiantou"></view>
					</view>
				</picker>
			</view>
			<view class="information-input-item" @click="showMulLinkageThreePicker">
				<view class="item-title">所在城市</view>
				<input disabled="true" placeholder="请选择你所在的城市" v-model="cityText"></input>
				<view class="iconfont iconjiantou"></view>
			</view>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		<view class="information-item information-item-child">
			<view class="child-msg" @click="addChild" v-if="childList.length == 0">添加孩子信息</view>
			<view class="title" v-if="childList.length > 0">
				<view class="text">孩子信息</view>
			</view>
			<view class="children" v-for="(child,cindex) in childList" :key="cindex">
				<view class="children-left">
					<headimg :realSrc="child.avatar"></headimg>
					<view class="childmsg">
						<view class="stumsg">{{child.nicheng}}</view>
						<view class="schoolmsg">{{child.childmsg}}</view>
					</view>
				</view>
				<view class="radio-stu" @click="unBind(child.student_id,cindex)">解绑</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import provinceData from '@/components/mpvue-citypicker/city-data/province.js';
	import cityData from '@/components/mpvue-citypicker/city-data/city.js';
	import areaData from '@/components/mpvue-citypicker/city-data/area.js';
	import util from '@/common/util.js';
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			mpvueCityPicker,
			headimg
		},
		data() {
			return {
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				cityText: '',
				reqData: {
					nicheng: '',
					provinec_id: '', //省份
					city_id: '', //城市
					area_id: '', //地区
					birthday: '',
					sex: '', //性别
				},
				childList: [],
				sexList: [{
					key: 1,
					value: '男'
				}, {
					key: 2,
					value: '女'
				}]
			}
		},
		created() {
			this.getData()
			this.getChildren()
		},
		methods: {
			// 性别改变
			handelSex(e) {
				this.reqData.sex = this.sexList[e.detail.value].key
			},
			// 生日
			handelBirthday(e) {
				this.reqData.birthday = e.detail.value
			},
			// 默认的第一个省份城市
			getData: function() {
				// 用户信息
				this.$zapi.apiPost('user/currency.basic/GetUserInfo', {
					is_get_bind: 2
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						this.reqData.nicheng = data.nicheng; //姓名
						this.reqData.provinec_id = data.provinec_id; //省
						this.reqData.city_id = data.city_id; //市
						this.reqData.area_id = data.area_id; //区
						this.reqData.sex = data.sex;
						this.reqData.birthday = data.birthday;
						this.request();
					}
				});
			},
			// 提交更改
			submitMsg() {
				uni.showLoading({
					title: '提交中....'
				})
				this.$zapi.apiPost('user/currency.basic/UpdateBasic', this.reqData).then(res => {
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						this.$emit('changeInfo');
						this.getData()
					}, 500)
				});
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 城市选择器点击确定
			onConfirm(e) {
				this.cityText = e.label;
				let city_id = this.reqData.city_id
				this.reqData.provinec_id = e.provinec_id;
				this.reqData.city_id = e.cityCode;
				this.reqData.area_id = e.area_id;
			},
			onCancel(e) {

			},
			// 更新用户地址
			request() {
				//查询省份
				var label = '';
				for (var _code in provinceData) {
					if (Number(provinceData[_code].value) === Number(this.reqData.provinec_id)) {
						label = provinceData[_code].label;
					}
				}
				//查询 城市
				var city_label = '';
				for (var i in cityData) {
					for (var k in cityData[i]) {
						if (Number(cityData[i][k].value) === Number(this.reqData.city_id)) {
							city_label = cityData[i][k].label;
						}
					}
				}
				//查询 区域/县
				var area_label = '';
				for (var i in areaData) {
					for (var k in areaData[i]) {
						for (var j in areaData[i][k]) {
							if (Number(areaData[i][k][j].value) === Number(this.reqData.area_id)) {
								area_label = areaData[i][k][j].label;
							}
						}
					}
				}
				this.cityText = label + city_label + area_label;
			},
			/* 获取孩子列表 */
			getChildren() {
				this.$zapi.apiPost('user/currency.Parents/childlist').then(res => {
					if (res.data.code == 200) {
						var list = res.data.data;
						list.forEach((item, key) => {
							item.nicheng = item.nicheng ? item.nicheng : '未设置昵称';
							if (item.school_info && item.school_info.length > 0 && item.school_info[0].schoolid > 0) {
								let school = item.school_info[0]
								item.gradeName = school.grade ? util.getgradeName(school.grade) : '未知年级';
								item.school_name = school.school_name ? school.school_name : '未知学校';
								item.childmsg = school.class_name ? item.school_name + '（' + item.gradeName +
									school.class_name + '）' : item.school_name + '（未加入班级）';
							} else {
								item.childmsg = '未绑定学校';
							}
						})
						this.childList = list
					}
				})
			},
			// 添加孩子
			addChild() {
				uni.navigateTo({
					url: '/pages/child/child-add-new'
				})
			},
			// 解除孩子绑定
			unBind(id, index) {
				var _this = this;
				uni.showModal({
					content: '您确定要解绑该孩子?',
					confirmColor: '#FF9900',
					success: function(res) {
						if (res.confirm) {
							_this.$zapi.apiPost('user/currency.Parents/untieChildren', {
								student_id: id
							}).then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								if (res.data.code == 200) {
									_this.childList.splice(index, 1);
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	image {
		object-fit: cover;
	}

	.other-information {
		width: 100%;
		min-height: 100%;
	}

	.information-item {
		background-color: #FFFFFF;

		.title {
			display: flex;
			margin-bottom: 30upx;

			.text {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #333333;
			}

			.iconlajitong {
				color: #F56C6C;
				margin-left: auto;
			}

			.iconbaocun-info {
				color: #FF9900;
				font-size: 34upx;
				font-weight: bold;
				margin-left: auto;
			}
		}

		.information-input-item {
			height: 90upx;
			border-bottom: 2upx solid #DCDFE6;
			display: flex;
			line-height: 90upx;

			.item-title {
				color: #333333;
				font-size: 28upx;
			}

			.iconjiantou {
				font-weight: bold;
				font-size: 38upx;
				color: #C0C4CC;
				margin-left: 30upx;
			}

			picker {
				height: 100%;
				margin-left: auto;

				.sel-content {
					display: flex;
				}

				input {
					height: 90upx;
					line-height: 90upx;
					margin-left: auto;
					text-align: right;
					font-size: 28upx;
				}
			}

			input {
				height: 100%;
				margin-left: auto;
				text-align: right;
				font-size: 28upx;
			}
		}

		.iconshouqi {
			padding: 22upx 0;
			text-align: center;
			font-size: 38upx;
			color: #D8D8D8;
		}
	}

	.child-msg {
		padding: 0;
		height: 238upx;
		line-height: 238upx;
		text-align: center;
		color: #FF9900;
		font-size: 36upx;
		font-weight: 400;
	}

	.children {
		width: calc(100% - 60upx);
		padding: 40upx 20upx 40upx 40upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2upx solid #FF9900;
		border-radius: 10upx;
		margin-top: 30upx;

		.children-left {
			width: 89%;
			display: flex;

			.head_image {
				width: 80upx;
				height: 80upx;
				border-radius: 50%;
			}

			.childmsg {
				color: #333333;
				margin-left: 20upx;
				width: calc(100% - 100upx);

				.stumsg {
					color: #333333;
					line-height: 20px;
					font-weight: bold;
					font-family: Source Han Sans CN;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.schoolmsg {
					font-family: Source Han Sans CN;
					line-height: 18px;
					color: #666666;
					font-size: 24upx;
					white-space: pre-wrap;
					word-break: break-word;
				}
			}
		}

		.radio-stu {
			color: #FF9900;
			white-space: nowrap;
		}
	}


	.information-item-child {
		margin-top: 30upx;
	}
</style>
